<style>
    .success{
        color: #00a65a;
    }
    .error{
        color: #a94442;
    }
</style>
<section class="content" >
    <div class="row"   >
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    uCloud IP&nbsp;:&nbsp;{{info.vmInfo.ip}}&nbsp;&nbsp;&nbsp;&nbsp;状态&nbsp;:&nbsp;{{info.vmStatus}}
                </div>
                <div class="box-body"  >
                    <ul id="myTab" class="nav nav-tabs">
                        <li class="" data-ng-repeat="zone in info.zones track by $index" ng-class="{true:'active',false:''}[$index==info.tabIndex]">
                            <a style="cursor: pointer;" ng-click="tabClick($index,zone);" data-toggle="tab">
                                {{zone.zone_title}}</a>
                        </li>
                    </ul>
                    <div id="myTabContent" class="tab-content">
                        <div class="tab-pane fade" style="max-height: 550px;overflow: scroll;" ng-class="{true:'in active',false:''}[true]">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th width="20%">任务名</th>
                                    <th width="60%">进度</th>
                                    <th width="20%">状态</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                <tr class="item" data-ng-repeat="task in info.tasks" ng-if="showTask(task);">
                                    <td>{{task.name}}</td>
                                    <td>
                                        <uib-progressbar class="progress-striped active" type="task.progressType" value="task.progress">{{task.progress}}%</uib-progressbar>
                                    </td>
                                    <td><span ng-class="{'READY':'success','DONE':'success','UNAVAIABLE':'error','FAILED':'error'}[task.status]">{{task.status}}</span></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>